<template>
  <div class="bg-gray-50">
    <header class="bg-white shadow-sm sticky top-0 z-50">
      <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
        <div class="flex items-center gap-2">
          <img :src="logoUrl" alt="logo" class="w-8 h-8 rounded-full object-cover" />
          <span class="text-lg font-semibold text-gray-800">快递到了吗</span>
        </div>
        <div class="flex items-center gap-3">
          <button class="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg" @click="$router.push('/login')">登录</button>
          <button class="px-4 py-2 text-sm bg-blue-500 text-white hover:bg-blue-600 rounded-lg" @click="$router.push('/register')">新用户注册</button>
        </div>
      </div>
    </header>

    <main>
      <section class="max-w-7xl mx-auto px-6 py-8">
        <div class="hero-gradient rounded-2xl p-10 text-white relative">
          <h1 class="text-3xl font-bold mb-3">校园快递代拿平台</h1>
          <p class="text-white/90 mb-8 text-sm">专为高校学生打造的快捷代拿服务平台，解决校园最后一公里配送难题</p>
          <div class="flex gap-12">
            <div>
              <div class="text-3xl font-bold">200+</div>
              <div class="text-white/80 text-sm mt-1">活跃用户</div>
            </div>
            <div>
              <div class="text-3xl font-bold">10万+</div>
              <div class="text-white/80 text-sm mt-1">完成订单</div>
            </div>
            <div>
              <div class="text-3xl font-bold">98%</div>
              <div class="text-white/80 text-sm mt-1">用户满意度</div>
            </div>
          </div>
        </div>
      </section>

      <section class="max-w-7xl mx-auto px-6 py-12">
        <h2 class="text-2xl font-bold text-center text-gray-800 mb-4">关于校园快递代拿</h2>
        <p class="text-center text-gray-600 text-sm max-w-3xl mx-auto mb-10 leading-relaxed">
          校园快递代拿平台是一款专为解决校园快递收发难题而设计的便捷服务平台。我们致力于通过技术手段优化校园快递配送流程，同时为在校学生提供勤工俭学的机会。平台一个安全、高效、便捷的校园快递生态系统。
        </p>
        <div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
          <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition">
            <div class="text-2xl text-blue-500 mb-4"><i class="fas fa-users"></i></div>
            <h3 class="text-lg font-semibold text-gray-800 mb-2">校园互助模式</h3>
            <p class="text-gray-600 text-sm leading-relaxed">同学帮同学，利用课余时间帮助同学代拿快递，既能赚取零花钱，又能帮助他人</p>
          </div>
          <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition">
            <div class="text-2xl text-blue-500 mb-4"><i class="fas fa-shield-alt"></i></div>
            <h3 class="text-lg font-semibold text-gray-800 mb-2">安全保障体系</h3>
            <p class="text-gray-600 text-sm leading-relaxed">严格审核代拿人员身份信息，确保每笔订单都有完整的追踪记录，保障双方权益</p>
          </div>
        </div>
      </section>

      <section class="max-w-7xl mx-auto px-6 py-12">
        <div class="bg-white rounded-2xl p-10 text-center shadow-sm">
          <div class="text-3xl text-blue-500 mx-auto mb-4"><i class="fas fa-user-shield"></i></div>
          <h2 class="text-2xl font-bold text-gray-800 mb-3">登录后使用完整功能</h2>
          <p class="text-gray-600 text-sm mb-6 max-w-md mx-auto">登录后，您可以根据需要选择发布代拿订单或接单赚取收益，开启您的校园快递代拿之旅</p>
          <div class="flex gap-4 justify-center mb-10">
            <button class="px-6 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition font-medium" @click="$router.push('/login')">立即登录</button>
            <button class="px-6 py-2.5 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition font-medium" @click="$router.push('/register')">免费注册</button>
          </div>
          <div class="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
            <div class="bg-blue-50 rounded-xl p-6 text-left">
              <div class="text-2xl text-blue-500 mb-4"><i class="fas fa-pen"></i></div>
              <h3 class="text-lg font-semibold text-gray-800 mb-2">发布订单</h3>
              <p class="text-gray-600 text-sm">选择取货地点、支付代拿费用、等待接单后即可坐等快递送上门</p>
            </div>
            <div class="bg-orange-50 rounded-xl p-6 text-left">
              <div class="text-2xl text-blue-500 mb-4"><i class="fas fa-box-open"></i></div>
              <h3 class="text-lg font-semibold text-gray-800 mb-2">接代拿单</h3>
              <p class="text-gray-600 text-sm">浏览附近订单，接单后代拿，赚取配送费，灵活安排时间</p>
            </div>
          </div>
        </div>
      </section>

      <section class="max-w-7xl mx-auto px-6 py-12">
        <h2 class="text-2xl font-bold text-center text-gray-800 mb-10">平台核心优势</h2>
        <div class="grid md:grid-cols-3 gap-6">
          <div class="bg-white rounded-xl p-8 text-center shadow-sm hover:shadow-md transition">
            <div class="text-3xl text-blue-500 mx-auto mb-4"><i class="fas fa-bolt"></i></div>
            <h3 class="text-lg font-semibold text-gray-800 mb-2">快速响应</h3>
            <p class="text-gray-600 text-sm leading-relaxed">实时推送订单信息，平均5分钟内匹配合适代拿，30分钟内完成配送</p>
          </div>
          <div class="bg-white rounded-xl p-8 text-center shadow-sm hover:shadow-md transition">
            <div class="text-3xl text-blue-500 mx-auto mb-4"><i class="fas fa-lock"></i></div>
            <h3 class="text-lg font-semibold text-gray-800 mb-2">安全可靠</h3>
            <p class="text-gray-600 text-sm leading-relaxed">实名认证与全程追踪，确保每笔交易都有完整记录</p>
          </div>
          <div class="bg-white rounded-xl p-8 text-center shadow-sm hover:shadow-md transition">
            <div class="text-3xl text-blue-500 mx-auto mb-4"><i class="fas fa-yen-sign"></i></div>
            <h3 class="text-lg font-semibold text-gray-800 mb-2">价格透明</h3>
            <p class="text-gray-600 text-sm leading-relaxed">统一价格标准，无隐藏费用，支持在线支付</p>
          </div>
        </div>
      </section>

      <section class="max-w-7xl mx-auto px-6 py-12">
        <div class="flex items-center justify-between mb-6">
          <h2 class="text-2xl font-bold text-gray-800">平台公告</h2>
          <a href="#" class="text-blue-500 text-sm hover:text-blue-600 flex items-center gap-1">查看全部 <span>→</span></a>
        </div>
        <div class="bg-white rounded-xl shadow-sm divide-y">
          <div v-for="ann in announcements" :key="ann.id" class="p-5 hover:bg-gray-50 transition cursor-pointer flex items-center justify-between">
            <div class="flex items-center gap-4 flex-1">
              <span 
                :class="{
                  'px-3 py-1 text-xs rounded-full font-medium': true,
                  'bg-blue-100 text-blue-600': ann.type === 'system',
                  'bg-green-100 text-green-600': ann.type === 'activity',
                  'bg-orange-100 text-orange-600': ann.type === 'notice'
                }"
              >
                {{ ann.type === 'system' ? '系统' : ann.type === 'activity' ? '活动' : '通知' }}
              </span>
              <p class="text-gray-800 text-sm">{{ ann.title }}</p>
            </div>
            <span class="text-gray-400 text-xs whitespace-nowrap ml-4">{{ formatAnnouncementDate(ann.published_at || ann.created_at) }}</span>
          </div>
          <div v-if="announcements.length === 0" class="p-5 text-center text-gray-400 text-sm">暂无公告</div>
        </div>
      </section>

      <section class="max-w-7xl mx-auto px-6 py-12">
        <h2 class="text-2xl font-bold text-center text-gray-800 mb-10">常见问题</h2>
        <div class="max-w-3xl mx-auto space-y-4">
          <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden" :class="{ 'active': activeFaq === 0 }">
            <button class="w-full p-5 flex items-center justify-between text-left hover:bg-gray-50 transition" @click="toggleFaq(0)">
              <span class="font-medium text-gray-800">如何成为代拿人？需要什么条件？</span>
              <span class="faq-icon">▼</span>
            </button>
            <div class="faq-content px-5 pb-5">
              <p class="text-gray-600 text-sm leading-relaxed">成为代拿人需要通过实名认证，上传学生证和身份证照片进行审核。审核通过后即可开始接单。我们要求代拿人必须是在校学生，有良好的信用记录，能够按时完成订单。</p>
            </div>
          </div>
          <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden" :class="{ 'active': activeFaq === 1 }">
            <button class="w-full p-5 flex items-center justify-between text-left hover:bg-gray-50 transition" @click="toggleFaq(1)">
              <span class="font-medium text-gray-800">订单费用如何计算？有没有额外收费？</span>
              <span class="faq-icon">▼</span>
            </button>
            <div class="faq-content px-5 pb-5">
              <p class="text-gray-600 text-sm leading-relaxed">订单费用根据距离和快递大小计算，平台会显示明确的价格。没有任何隐藏费用，您看到的价格就是最终支付的价格。支持多种支付方式，安全便捷。</p>
            </div>
          </div>
          <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden" :class="{ 'active': activeFaq === 2 }">
            <button class="w-full p-5 flex items-center justify-between text左 hover:bg-gray-50 transition" @click="toggleFaq(2)">
              <span class="font-medium text-gray-800">快递丢失或损坏了怎么办？</span>
              <span class="faq-icon">▼</span>
            </button>
            <div class="faq-content px-5 pb-5">
              <p class="text-gray-600 text-sm leading-relaxed">平台为每笔订单提供保险保障。如果快递在代拿过程中丢失或损坏，可以通过平台申请理赔。我们会根据实际情况进行调查，确保用户权益得到保障。</p>
            </div>
          </div>
          <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden" :class="{ 'active': activeFaq === 3 }">
            <button class="w-full p-5 flex items-center justify-between text-left hover:bg-gray-50 transition" @click="toggleFaq(3)">
              <span class="font-medium text-gray-800">可以指定代拿时间吗？能提前预约吗？</span>
              <span class="faq-icon">▼</span>
            </button>
            <div class="faq-content px-5 pb-5">
              <p class="text-gray-600 text-sm leading-relaxed">可以的！平台支持预约代拿功能，您可以选择希望的取件时间段。代拿人会在您指定的时间内完成配送。这样可以更好地安排您的时间，确保能够及时收到快递。</p>
            </div>
          </div>
          <div class="faq-item bg-white rounded-xl shadow-sm overflow-hidden" :class="{ 'active': activeFaq === 4 }">
            <button class="w-full p-5 flex items-center justify-between text-left hover:bg-gray-50 transition" @click="toggleFaq(4)">
              <span class="font-medium text-gray-800">如何保证代拿过程中我的隐私安全？</span>
              <span class="faq-icon">▼</span>
            </button>
            <div class="faq-content px-5 pb-5">
              <p class="text-gray-600 text-sm leading-relaxed">我们非常重视用户隐私保护。所有代拿人都经过实名认证，平台会对个人信息进行加密处理。订单完成后，相关信息会按照隐私政策进行处理，确保您的个人信息安全。</p>
            </div>
          </div>
        </div>
        <div class="text-center mt-8">
          <a href="#" class="inline-flex items-center gap-2 text-blue-500 hover:text-blue-600 font-medium">查看更多常见问题 <span>→</span></a>
        </div>
      </section>
    </main>

    <footer class="bg-gray-900 text-white mt-16">
      <div class="max-w-7xl mx-auto px-6 py-12">
        <div class="grid md:grid-cols-3 gap-8 justify-items-center text-center">
          <div>
            <h3 class="font-semibold mb-4">平台服务</h3>
            <ul class="space-y-2 text-sm text-gray-400">
              <li><a href="#" class="hover:text-white transition">快递代拿</a></li>
              <li><a href="#" class="hover:text-white transition">服务保障</a></li>
              <li><a href="#" class="hover:text-white transition">代拿须知</a></li>
              <li><a href="#" class="hover:text-white transition">服务范围</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-semibold mb-4">帮助中心</h3>
            <ul class="space-y-2 text-sm text-gray-400">
              <li><a href="#" class="hover:text-white transition">用户指南</a></li>
              <li><a href="#" class="hover:text-white transition">常见问题</a></li>
              <li><a href="#" class="hover:text-white transition">联系客服</a></li>
              <li><a href="#" class="hover:text-white transition">意见反馈</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-semibold mb-4">关于我们</h3>
            <ul class="space-y-2 text-sm text-gray-400">
              <li><a href="#" class="hover:text-white transition">平台介绍</a></li>
              <!-- <li><a href="#" class="hover:text-white transition">招聘信息</a></li>
              <li><a href="#" class="hover:text-white transition">合作洽谈</a></li> -->
              <li><a href="#" class="hover:text-white transition">联系方式</a></li>
            </ul>
          </div>
          <!-- <div>
            <h3 class="font-semibold mb-4">关注我们</h3>
            <div class="bg-white p-3 rounded-lg inline-block mb-3">
              <div class="w-28 h-28 bg-gray-200 flex items-center justify-center text-gray-500">公众号二维码</div>
            </div>
            <p class="text-sm text-gray-400">扫码关注公众号</p>
          </div> -->
        </div>
        <div class="border-t border-gray-800 mt-10 pt-8 text-center text-sm text-gray-400">
          <p>© 2025 校园快递代拿平台 版权所有 | <a href="#" class="hover:text-white">隐私政策</a> | <a href="#" class="hover:text白">使用条款</a> | <a href="#" class="hover:text-white">联系我们</a></p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import logo from '@/../头像.jpg'

export default {
  name: 'Home',
  data() {
    return { 
      logoUrl: logo || '',
      activeFaq: -1,
      announcements: []
    }
  },
  methods: {
    toggleFaq(index) { this.activeFaq = this.activeFaq === index ? -1 : index },
    formatAnnouncementDate(dateStr) {
      if (!dateStr) return '-'
      try {
        const date = new Date(dateStr)
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
      } catch {
        return dateStr
      }
    },
    async fetchAnnouncements() {
      try {
        const response = await fetch('/api/announcements?limit=5')
        const result = await response.json()
        if (result.success) {
          this.announcements = result.data || []
        }
      } catch (e) {
        console.error('获取公告失败', e)
      }
    }
  },
  mounted() {
    this.fetchAnnouncements()
  }
}
</script>

<style scoped>
.hero-gradient { background: linear-gradient(135deg, #4A90E2 0%, #357ABD 50%, #2E5C8F 100%); position: relative; overflow: hidden; }
.hero-gradient::before { content: ''; position: absolute; top: -50%; right: -10%; width: 600px; height: 600px; background: rgba(255,255,255,.1); border-radius: 50%; }
.faq-item { transition: all .3s ease; }
.faq-content { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.active .faq-content { max-height: 200px; }
.faq-item.active .faq-icon { transform: rotate(180deg); display: inline-block; }
.faq-icon { transition: transform .3s ease; display: inline-block; }
</style>

